<template>
    <div class="body">
        <div class="header">
			<div class="title" @click="goback()">
				<div class="title-h">
					<div class="icon">
						<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M328 112L184 256l144 144"/></svg>
					</div>
					<div class="txt-h">
						钱包
					</div>					 
				</div>				
			</div>			
		</div>
		<div class="content_panel">
			<div class="yue">
				<div class="shoufukuan" @click="shoufukuan()">
					<div class="icon">
						<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M336 448h56a56 56 0 0056-56v-56M448 176v-56a56 56 0 00-56-56h-56M176 448h-56a56 56 0 01-56-56v-56M64 176v-56a56 56 0 0156-56h56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>
					</div>
					<div class="txt">
						收付款
					</div>					
				</div>
				<div class="qianbao">
					<div class="icon">
						<svg data-v-65511fdb="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ionicon"><rect data-v-65511fdb="" x="48" y="144" width="416" height="288" rx="48" ry="48" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></rect><path data-v-65511fdb="" d="M411.36 144v-30A50 50 0 00352 64.9L88.64 109.85A50 50 0 0048 159v49" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path><path data-v-65511fdb="" d="M368 320a32 32 0 1132-32 32 32 0 01-32 32z"></path></svg>
					</div>
					<div class="txt">
						钱包
					</div>
					<div class="blance">
						￥{{blance}}
					</div>
				</div>
			</div>
		</div>
        <ToolbBar></ToolbBar>
    </div>
</template>
<script>
import ToolbBar from '@/components/ToolBar.vue'

export default {
    name:"PayPackView",
    components:{
        ToolbBar
    },
    data(){
        return{
            blance:"",
        }
    },
    mounted(){
        this.getBlance();
    },
    methods:{
        async getBlance(){
            //从Vuex获取当前用户信息
            let user = JSON.parse(this.$store.state.Authorization) ;
            let res = await this.$http.post('getBlance',user);            
            this.blance = res.data.blance;
        },
        shoufukuan(){
            this.$router.push('/PayeeQrcode');
        },
        goback(){
            this.$router.push('/');
        }
    }
}
</script>
<style scoped>
/* 顶部搜索栏 */
.header {	
	background-color: #1678ff;
	color: #fff;
	width: 100%;
}

.header .title{
	font-size: 18px;
	margin-left: 20px;
	padding: 20px 0;
}

.title-h{
	display: flex;
	flex-direction: row;
	vertical-align: middle;
	align-items: center;
}

.title-h .icon{
	width: 30px;
	height: 30px;
}

/* 钱包内容 */
.content_panel{
	background-color: #f5f5f5;
	height: 85vh;
	padding: 10px;
}



.yue{
	background-color: #1678ff;
	border-radius: 10px;
	color: #fff;
	display: flex;
	justify-content: space-around;
	padding: 20px 0;
}

.shoufukuan .icon{
	width: 50px;
}

.yue .txt{
	font-size: 18px;
	text-align: center;
}

.qianbao,.shoufukuan{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.qianbao .icon{
	width: 50px;
	fill: #fff;	
}

.qianbao .blance{
	font-size: 14px;
	color: #9dc9ff;
}
</style>